<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>好医生</title>
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/shouye/wellDoc.css" />
		<script type="text/javascript" src="../../js/jquery-2.1.3.min.js"></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../../js/loadHtml.js"></script>
	</head>
	<body>
		<div class="wrapper clearfix">
			<div class="sideBar"></div>
			<div class="main">
				<div class="zixunTop">
					<h1 class="title">好医生</h1>
					<div class="choose">
						<div class="chooseLeft">
							<input type="text" placeholder="请输入医生姓名" class="inputSize" />
							<input type="text" placeholder="请输入医生职称" class="inputSize" />
							<select class="selectSize">
								<option value="选择科室"></option>
								<option value="发布中">发布中</option>
								<option value="未发布">未发布</option>
							</select>
							<button class="btn1">
								搜索
							</button>
						</div>
						<button class="btnAdd" data-toggle="modal" data-target="#myModal">
							添加
						</button>
					</div>
				</div>
				<div class="tableMain">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>序号</th>
								<th>姓名</th>
								<th>职称</th>
								<th>所属科室</th>
								<th>收藏人数</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>10</td>
								<td>张丽</td>
								<td>主任医师</td>
								<td>呼吸内科</td>
								<td>80</td>
								<td class="last">
								<div style="margin-left:0;">
									<img src="../../img/chakan.png" />
									<h1>查看</h1>
								</div>
								<div>
									<img src="../../img/quxiao.png" />
									<h1>取消好医生</h1>
								</div></td>
							</tr>
							<tr>
								<td>10</td>
								<td>张丽</td>
								<td>主任医师</td>
								<td>呼吸内科</td>
								<td>80</td>
								<td class="last">
								<div style="margin-left:0;">
									<img src="../../img/chakan.png" />
									<h1>查看</h1>
								</div>
								<div>
									<img src="../../img/quxiao.png" />
									<h1>取消好医生</h1>
								</div></td>
							</tr>
							<tr>
								<td>10</td>
								<td>张丽</td>
								<td>主任医师</td>
								<td>呼吸内科</td>
								<td>80</td>
								<td class="last">
								<div style="margin-left:0;">
									<img src="../../img/chakan.png" />
									<h1>查看</h1>
								</div>
								<div>
									<img src="../../img/quxiao.png" />
									<h1>取消好医生</h1>
								</div></td>
							</tr>
							<tr>
								<td>10</td>
								<td>张丽</td>
								<td>主任医师</td>
								<td>呼吸内科</td>
								<td>80</td>
								<td class="last">
								<div style="margin-left:0;">
									<img src="../../img/chakan.png" />
									<h1>查看</h1>
								</div>
								<div>
									<img src="../../img/quxiao.png" />
									<h1>取消好医生</h1>
								</div></td>
							</tr>
							<tr>
								<td>10</td>
								<td>张丽</td>
								<td>主任医师</td>
								<td>呼吸内科</td>
								<td>80</td>
								<td class="last">
								<div style="margin-left:0;">
									<img src="../../img/chakan.png" />
									<h1>查看</h1>
								</div>
								<div>
									<img src="../../img/quxiao.png" />
									<h1>取消好医生</h1>
								</div></td>
							</tr>
							<tr>
								<td>10</td>
								<td>张丽</td>
								<td>主任医师</td>
								<td>呼吸内科</td>
								<td>80</td>
								<td class="last">
								<div style="margin-left:0;">
									<img src="../../img/chakan.png" />
									<h1>查看</h1>
								</div>
								<div>
									<img src="../../img/quxiao.png" />
									<h1>取消好医生</h1>
								</div></td>
							</tr>
							<tr>
								<td>10</td>
								<td>张丽</td>
								<td>主任医师</td>
								<td>呼吸内科</td>
								<td>80</td>
								<td class="last">
								<div style="margin-left:0;">
									<img src="../../img/chakan.png" />
									<h1>查看</h1>
								</div>
								<div>
									<img src="../../img/quxiao.png" />
									<h1>取消好医生</h1>
								</div></td>
							</tr>
						</tbody>
					</table>
				</div>

				<!-- 弹框内容 1-->
				<div class="alertMain">
					<div class="alertCon">
						<img src="../../img/arrow.png" />
						<h1>删除医生</h1>
						<p>
							确定删除该医生吗？
						</p>
						<div>
							<button>
								保存
							</button>
							<button>
								取消
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 模态框内容 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close"
						data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">添加好医生</h4>
					</div>
					<div class="modal-body">
						<p class="notice">! 最多可选8位医生</p>
						<div class="modalMain">
							<div class="modalLeft">
								<select>
									<option value="全部医生">全部医生</option>
								</select>
								<div class="modalTop">
									<input type="text" class="inputSize" placeholder="请输入医生姓名"/>
									<button class="btn1">搜索</button>
								</div>
								<ul>
									<li>张丽医师</li>
									<li>张丽医师</li>
									<li>张丽医师</li>
									<li>张丽医师</li>
									<li>张丽医师</li>
									<li>张丽医师</li>
								</ul>
							</div>
							<div class="modalCenter">
								<div class="centerTop">
									<img src="../../img/right.png" />
									<h1>移入</h1>
								</div>
								<div class="centerBottom">
									<img src="../../img/left.png" />
									<h1>移出</h1>
								</div>
							</div>
							<div class="modalRight">
								<h1>已选医生<span>（6）</span></h1>
								<ul>
									<li>
										<h2>张丽医生</h2>
										<h2 class="childTwo">呼吸内科</h2>
										<div class="move">
											<img src="../../img/top.png" />
											<img src="../../img/down.png" />
										</div>
									</li>
									<li>
										<h2>张丽医生</h2>
										<h2 class="childTwo">呼吸内科</h2>
										<div class="move">
											<img src="../../img/top.png" />
											<img src="../../img/down.png" />
										</div>
									</li>
									<li>
										<h2>张丽医生</h2>
										<h2 class="childTwo">呼吸内科</h2>
										<div class="move">
											<img src="../../img/top.png" />
											<img src="../../img/down.png" />
										</div>
									</li>
									<li>
										<h2>张丽医生</h2>
										<h2 class="childTwo">呼吸内科</h2>
										<div class="move">
											<img src="../../img/top.png" />
											<img src="../../img/down.png" />
										</div>
									</li>
									<li>
										<h2>张丽医生</h2>
										<h2 class="childTwo">呼吸内科</h2>
										<div class="move">
											<img src="../../img/top.png" />
											<img src="../../img/down.png" />
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default"
						data-dismiss="modal">
							保存
						</button>
						<button type="button" class="btn btn-primary">
							取消
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
	</body>
</html>
<script type="text/javascript">
	$(function() {
		$('.last div').hover(function() {
			$(this).children('h1').show();
		}, function() {
			$(this).children('h1').hide();
		});

		$('.table tr').find('.last div:eq(1)').click(function() {
			var alertTop = $(this).offset().top + 60;
			$('.alertMain').css({
				'top' : alertTop
			});
			$('.alertMain').show();
		});

		$('.alertCon button:eq(0)').click(function() {
			$('.alertMain').hide();
		});

	});

</script>